<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tempo :: Solr Example</title>

<!-- Import the 1KB CSS Grid -->
<link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen">

<!-- Import styles for the universal footer -->
<link rel="stylesheet" href="../css/examples.css" type="text/css" media="screen">

<style type="text/css" media="screen">
        /* reset and basic typography */
    body {
        margin: 0;
        padding: 0;
        font-family: Helvetica, Arial, sans-serif;
    }

    h1, h2, #solr-facets h3 {
        font-family: Georgia;
        font-weight: normal;
    }

    ol, ul {
        margin: 0;
        padding: 0;
        list-style: none outside none;
    }

        /* header */
    #header {
        background-color: black;
    }

    h1 {
        color: white;
    }

    form {
        float: right;
    }

    form input {
        font-size: 1em;
        margin-top: 1.8em;
    }

    form #query {
        width: 15em;
    }

    div.error {
        margin: 50px 0 30px 0;
        font-family: Georgia, "Times New Roman", serif;
        text-align: center;
        font-size: 1.5em;
    }

        /* breadcrumbs */
    #solr-breadcrumbs ul {
        margin: 1em 1em 2em 1em;
        padding-bottom: 0.5em;
    }

    #solr-breadcrumbs ul li {
        display: block;
        float: left;
        margin-right: 15px;
        text-transform: capitalize;
    }

    #solr-breadcrumbs ul li a {
        color: #999;
        font-size: 1.3em;
        text-decoration: none;
        margin: 0 8px 0 0;
    }

    #solr-breadcrumbs ul li a:hover {
        color: #333;
    }

        /* search results */
    h2 {
        color: #999;
        padding: 0 0 0.5em 0;
        margin: 0;
        border-bottom: 1px solid #ccc;
    }

    ol li {
        padding: 1.25em 0;
        border-bottom: 1px solid #e9e9e9;
        text-align: center;
    }

    ol li h3 {
        margin: 0 0 0.25em 0;
        font-family: Georgia;
        font-weight: normal;
        font-size: 1.5em;
        color: #333;
    }

    ol li p {
        font-size: 0.9em;
        color: #999;
    }

    ol li p.byline {
        margin: 0;
        text-transform: uppercase;
    }

    ol li p.byline a {
        color: #999;
        text-decoration: none;
        border-bottom: 1px solid #ccc;
    }

    ol li p.byline a:hover {
        color: #333;
    }

        /* faceted navigation */
    #solr-facets {
        border-left: 1px dotted #ccc;
        padding-left: 49px;
        margin-left: 40px;
    }

    #solr-facets h3 {
        text-transform: capitalize;
        color: #999;
        padding: 0 0 0.7em 0;
        margin: 0.3em 0 0 0;
        border-bottom: 1px solid #ccc;
    }

    #solr-facets ul {
        margin-bottom: 2em;
    }

    #solr-facets ul li li {
        text-transform: capitalize;
        padding: 0.33em 0;
        font-size: 0.95em;
        border-bottom: 1px solid #e9e9e9;
    }

    #solr-facets ul li li:hover {
        background-color: #f2f2f2;
    }

    #solr-facets ul li span {
        color: #999;
        font-family: Georgia;
    }

    #solr-facets ul li a {
        color: black;
        text-decoration: none;
    }

    #solr-facets ul li a:hover {
        text-decoration: underline;
    }
</style>

<!-- Import Tempo -->
<script type="text/javascript" src="../../tempo.min.js"></script>

<!-- This example uses jQuery's ajax() method to retrieve data from Solr -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="solr.js"></script>

<script type="text/javascript">

    var solrjs = new SolrJS('http://data.twigkit.com/solr-news/select/?version=2.2&start=0&rows=10&wt=json&json.nl=arrarr&facet=true&facet.limit=10&facet.field=category&facet.field=source&facet.mincount=1');
    var responseTemplate, breadcrumbsTemplate;

    $(document).ready(function() {
        // Prepare templates
        Tempo.prepare('solr-breadcrumbs', {}, function(template) {
            breadcrumbsTemplate = template;

            Tempo.prepare('mainbody', {}, function(template) {
                responseTemplate = template;
                // Default query
                query('');
            });
        });
    });

    function query(q) {
        // Search request
        solrjs.q(q != undefined && q != '' ? q : '*:*');
        _request();
    }

    function addFilter(field, value) {
        solrjs.add_fq(field, value);
        _request();
    }

    function removeFilter(field, value) {
        solrjs.remove_fq(field, value);
        _request();
    }

    function _request() {
        responseTemplate.starting();
        $.ajax({
            url: solrjs.url(),
            dataType: 'jsonp',
            jsonp: 'json.wrf',
            success: function(data) {
                // Render the query breadcrumbs
                breadcrumbsTemplate.render(solrjs.params);
                // Render the primary response, associated results and facets
                responseTemplate.render(data);
            }
        });
    }
</script>
<script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-10163369-2']);
    _gaq.push(['_trackPageview']);

    (function() {
        var ga = document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ga, s);
    })();

</script>
</head>
<body>


<!-- Header -->
<div id="header">
    <div class="row">
        <div class="column grid_6">
            <h1>Tempo + Solr = True Love</h1>
        </div>
        <div class="column grid_6">
            <form id="search" onsubmit="solrjs.reset(); query($('#q').val()); return false;">
                <input type="search" name="q" id="q" placeholder="Search news!">
                <input type="submit" value="Search" id="submit">
            </form>
        </div>
    </div>
</div>


<div id="solr-breadcrumbs" class="row">
    <ul data-template style="display: none;">
        {% if q !== '*:*' %}
        <li><a href="#" onclick="query(''); return false;">&#215;</a>{{q}}</li>
        {% endif %}
        <li data-template-for="fq"><a href="#" onclick="removeFilter(__.field, __.value); return false;" title="{{field}}">&#215;</a>{{value}}</li>
    </ul>
</div>

<!-- Main Body -->
<div id="mainbody" class="row">
    <div data-template style="display: none;">

        <!-- Search Results -->
        <div class="column grid_8">
            <h2>{{response.numFound|format}} results found</h2>

            <ol>
                <li data-template-file="partials/result.html" data-template-for="response.docs"></li>
            </ol>
        </div>

        <!-- Faceted Navigation -->
        <div id="solr-facets" class="column grid_3">
            <ul>
                <li data-template-file="partials/facet.html" data-template-for="facet_counts.facet_fields" data-from-map></li>
            </ul>
        </div>
    </div>
    <div class="error" data-template-fallback>
        Sorry, but you sort of need JavaScript for this one!
    </div>
</div>


<!-- Universal Footer -->
<ul id="tempo-actions">
    <li><a href="http://tempojs.com/">Back to the Overview</a></li>
    <li class="download"><a href="https://github.com/twigkit/tempo/archive/2.0.zip">Download</a></li>
    <li><a href="https://github.com/twigkit/tempo">View on GitHub</a></li>
</ul>
<div id="footer">
    <div class="row">
        <p>Brought to you by the friendly guys at <a href="http://twigkit.com/">Twigkit</a>. Follow <a href="http://twitter.com/mrolafsson">Stefan Olafsson</a> on Twitter.</p>
    </div>
</div>


</body>
</html>
